<template>
  <div class="page-tabbar">
    <div class="page-wrap">
      <!-- 菜单 -->
      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item v-for="(nav, key) in navName" :key="key" :id="key" class="tabbar">
          <div class="icons" :class="nav.iconClass" slot="icon"></div>
          {{nav.title}}        
        </mt-tab-item>
      </mt-tabbar>
      <!-- 内容 -->
      <mt-tab-container class="page-tabbar-container" v-model="selected">
        <mt-tab-container-item v-for="(nav, key) in navName" :key="key" :id="key">
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TabBar',
  props: ['navName'],
  data () {
    return {
      selected: Number(this.$route.query.home) || 0
    }
  },
  watch: {
    selected (val) {
      // 浅拷贝
      let query = {}
      for (let i in this.$route.query) {
        query[i] = this.$route.query[i]
      }
      Object.assign(query, {home: val})
      this.$router.replace({name: this.navName[val].path, query})
    }
  }
}
</script>

<style lang="less">
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);

  .page-tabbar {
    overflow: hidden;  
    height: 0;
    background-color: #FFF;
    color: #a9a9a9;
    .page-wrap {  
      overflow: auto;  
      height: 100%;  
      padding-bottom: 100px;
      .mint-tabbar {
        &.is-fixed {
          z-index: 2;
        }
        .mint-tab-item {
          .mint-tab-item-icon {
            width: 40px;
            height: 32px;
            margin: 0 auto;
            .icons {
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
            .tab-bag {
              background-image: url('/src/assets/icons/tab-bag.png');
            }
            .tab-activity {
              background-image: url('/src/assets/icons/tab-activity.png');
            }
            .tab-transaction {
              background-image: url('/src/assets/icons/tab-transaction.png');
            }
            .tab-personal {
              background-image: url('/src/assets/icons/tab-personal.png');
            }
          }
          &.is-selected {
            background-color: @c-235;
            color: @c-blue;
            .mint-tab-item-icon {
              .tab-bag {
                background-image: url('/src/assets/icons/tab-bag-on.png');
              }
              .tab-activity {
                background-image: url('/src/assets/icons/tab-activity-on.png');
              }
              .tab-transaction {
                background-image: url('/src/assets/icons/tab-transaction-on.png');
              }
              .tab-personal {
                background-image: url('/src/assets/icons/tab-personal-on.png');
              }
            }
          }
        }
      }
    }
  }
</style>